<template>
  <a-card size="small" style="width: 100%">
    <div
      class="operation"
      :style="{
        padding:
          hideRightTool && !(slots.extraLeft || slots.extraRight) ? '0' : '8px',
      }"
      v-if="!hideTool"
    >
      <div>
        <slot name="extraLeft"></slot>
      </div>
      <div>
        <slot name="extraRight"></slot>
        <operation
          v-if="!hideRightTool"
          v-model:size="options.size"
          v-model:columns="state.sortColumns"
          v-model:selected-keys="state.selectedKeys"
          @reload="emit('reload')"
          ref="operationRef"
        />
      </div>
    </div>
    <a-table
      :row-key="rowKey"
      :columns="dynamicColumns"
      :data-source="dataSource"
      :pagination="pagination"
      :loading="loading"
      :size="options.size"
      :custom-row="customRow"
      bordered
      :scroll="scroll"
      :row-selection="rowSelection"
      @resize-column="handleResizeColumn"
      @change="(v: any) => emit('change', v)"
    >
      <template v-for="name in Object.keys(slots)" #[name]="slotProps">
        <slot :name="name" v-bind="slotProps"></slot>
      </template>
    </a-table>
  </a-card>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import { useColumns } from "@/hook/useColumns";
import type { TableColumnType, TableProps } from "ant-design-vue";
import type { SizeType } from "ant-design-vue/es/config-provider";
import type { TableColumnsType, TablePaginationConfig } from "ant-design-vue";
import Operation from "./components/operation.vue";
interface Props {
  /**表格列 */
  columns: TableColumnsType;
  /**数据 */
  dataSource: any[];
  /**加载 */
  loading?: boolean;
  /**分页 */
  pagination?: false | TablePaginationConfig;
  /**默认大小 */
  defaultSize?: SizeType;
  /**隐藏工具栏 */
  hideTool?: boolean;
  /**隐藏工具栏右侧操作 */
  hideRightTool?: boolean;
  /**表格滚动 */
  scroll?: TableProps["scroll"];
  /**主键 */
  rowKey?: string;
  /**表格选择 */
  rowSelection?: TableProps["rowSelection"];
  /**表格自定义行 */
  customRow?: TableProps["customRow"];
}
const props = withDefaults(defineProps<Props>(), {
  scroll: () => ({ x: "100%" }),
});
const slots = defineSlots();
const emit = defineEmits(["reload", "change"]);
const { state, dynamicColumns } = useColumns(props.columns);
function handleResizeColumn(w: number, column: TableColumnType) {
  column.width = w;
}
const options = reactive({
  size: props.defaultSize || "small",
});
</script>
<style lang="less" scoped>
:deep(.ant-card-body) {
  padding: 0;
}
.operation {
  display: flex;
  justify-content: space-between;
}
</style>
